<template>
	<view class="Comupload">
		<view class="upload-box">
			<!-- 图片列表 -->
			<block v-for="(item, index) in uploadList" :key="index">
				<view
					class="upload-item upload-list"
					:style="{
						width: options.width + 'rpx',
						height: options.height + 'rpx',
						borderRadius:options.radius+'rpx',
						marginTop: options.top + 'rpx',
						marginBottom: options.bottom + 'rpx',
						marginRight: ((index + 1) % options.num == 0 ? 0 : options.right+'rpx'),
						backgroundImage: 'url(' +https_url+item + ')'
					}"
					@click="Onenlarge(index)"
				 >
					<image class="upload-del" src="https://static.newbeaconhotels.com/app/hotel/delete.png" @click.stop="Ondelete(index)"></image>
				</view>
			</block>
			<!-- 添加按钮 -->
			<view class="upload-item" v-if="uploadList.length < options.max" @click="Onopen">
				<slot v-if="options.slot"></slot>
				<view v-else class="upload-add" 
					:style="{
						width: options.width + 'rpx',
						height: options.height + 'rpx',
						borderRadius:options.radius+'rpx',
						marginTop: options.top + 'rpx',
						marginBottom: options.bottom + 'rpx'
					}"
				>
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/photo.png"></image>
					<view class="p1">上传凭证</view>
					<text class="p2">(最多{{options.max}}张)</text>
				</view>
			</view>
		</view>
		<!-- 下拉弹窗 -->
		<uni-popup ref="Compopup" type="bottom" @change="onChange">
			<view class="popup_bos">
				<view class="up_choicea" @click="Onalbum('album')">从相册中选择</view>
				<view class="up_choicebor"></view>
				<view class="up_choiceb" @click="Onalbum('camera')">拍照</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "Comupload",
		props: {
			options: {
				type: Object,
				default: {},
			},
			Comtype: {
				type: Object,
				default: ()=>{},
			}
		},
		data() {
			return {
				https_url:this.$Config.http_static,
				uploadList: []
			};
		},
		methods: {
			// 弹窗的change事件
			onChange (e) {
				this.$emit('toggle', e)
			},
			// 打开上传弹窗
			Onopen() {
				this.$refs.Compopup.open()
			},
			// 上传图片
			Onalbum(choois) {
				let that = this
				let list = this.uploadList
				let count = this.options.max - list.length
				uni.chooseImage({
					count: count,
					sizeType: ['original', 'compressed'],
					sourceType: [choois],
					success(res) {
						let exceed = true
						res.tempFiles.forEach(item => {
							if (item.size > 1000000) {
								exceed = false
							}
						})
						that.$refs.Compopup.close()
						if(!exceed){
							uni.showToast({ title: '上传图片大于1M请重新上传', icon: 'none', duration: 2000 })
							return
						}
						uni.showLoading({ title: '上传中', mask: true });
						res.tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: that.$Config.http_domain + that.$Config.http_api.uploadImg,
								filePath: item,
								name: 'file',
								success: function(res1) {
									let resdata = JSON.parse(res1.data)
									if (resdata.code == 1) {
										let urlimg = resdata.data
										that.uploadList.push(urlimg)
										that.$emit('callback', that.uploadList ,that.Comtype)
									} else {
										uni.showToast({ title: resdata.msg, icon: 'none', duration: 2000 })
									}
								},
								fail: function(res) {}
							})
						})
						uni.hideLoading();
					},
					fail(res) {
						uni.showToast({ title: '上传图片失败', icon: 'none', duration: 2000 })
					}
				})
			},
			// 删除
			Ondelete(e) {
				this.uploadList.splice(e, 1);
				this.$emit('callback', this.uploadList , this.Comtype)
			},
			// 图片放大
			Onenlarge(e) {
				let list = this.uploadList
				list.forEach(item=>{
					item = this.https_url+item
				})
				uni.previewImage({
					current: e,
					urls: list
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.upload-box {
		width: 100%;padding-top: 20rpx; display: flex;flex-wrap: wrap;
		.upload-item{background-position: center center;background-repeat: no-repeat;background-size: cover;position: relative;}
		.upload-del {position: absolute;height: 34rpx;width: 34rpx;top: -16rpx;right: -16rpx;}
		.upload-add{
			background-color: #f8f8f8;display: flex;flex-direction: column;justify-content: center;align-items: center;
			.icon{width: 64rpx;height: 54rpx;}
			.p1{font-size: 24rpx;color: #666;padding: 6rpx 0;}
			.p2{font-size: 20rpx;}
		}
	}

	.popup_bos {
		background-color: #FFFFFF;z-index: 999;position: relative;
		.up_choicea {width: 750rpx;text-align: center;padding: 34rpx 0;font-size: 30rpx;color: #4a4747;}
		.up_choiceb {width: 750rpx;text-align: center;padding: 34rpx 0;font-size: 30rpx;color: #4a4747;}
		.up_choicebor {width: 700rpx;height: 2rpx;background-color: #f6f6f6;margin: 0 auto;}
	}
</style>
